<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><%= title %></title>
    <style type="text/css">
        .box{
            width: 1200px;
            height:400px;
            margin: 40px auto;
            border: 1px solid #e6e6e6;
        }
    </style>
    <script type="text/javascript" src="/javascript/lib/echarts-4.1.0.js"></script>
    <script type="text/javascript" src="/javascript/lib/jQuery-3.3.1.js"></script>
    <script type="text/javascript" src="/javascript/lib/socket.io.dev.js"></script>
</head>
<body>
<div>
    <%= title %>
    <input type="button" value="发送数据POST" id="updateData">
    <input type="button" value="发送数据GET" id="updateDataGET">
    <hr>
    <div id="main1" class="box"></div>
    <div id="main" class="box"></div>
    <script type="text/javascript">
        window.onload = function () {

            // 上传测试数据
            $('#updateData').click(function () {

                let num =(Math.random()*9 + 21).toFixed(3)
                $.post('/temp/update',{ t: num }, function (res) {
                    console.log('返回的结果', res)
                })
            })

            // 上传测试数据
            $('#updateDataGET').click(function () {

                let num =(Math.random()*9 + 21).toFixed(3)
                $.get('/temp/update',{ t: num }, function (res) {
                    console.log(res)
                })

            })

            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.getElementById('main'));
            let myChart1 = echarts.init(document.getElementById('main1'));

            function randomData() {
                now = new Date(+now + oneDay);
                value = (Math.random()*9 + 21).toFixed(3)
                return {
                    name: now.toString(),
                    value: [
                        [now.getFullYear(), now.getMonth(), now.getDate()].join('/'),
                        value
                    ]
                }
            }

            let data = [];
            let now = +new Date(2018, 5, 1);
            let oneDay = 24 * 3600 * 1000;
            let value = Math.random() * 1000;
            for (let i = 0; i < 31; i++) {
                data.push(randomData());
            }

            console.log('temp', data)

            let option = {
                title: {
                    text: '动态数据 + 时间坐标轴'
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        params = params[0];
                        let date = new Date(params.name);
                        return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' : ' + params.value[1];
                    },
                    axisPointer: {
                        animation: false
                    }
                },
                xAxis: {
                    type: 'time',
                    splitLine: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, '100%'],
                    splitLine: {
                        show: false
                    }
                },
                series: [{
                    name: '模拟数据',
                    type: 'line',
                    showSymbol: false,
                    hoverAnimation: false,
                    data: data
                }]
            };

            myChart.setOption(option)

            // setInterval(function () {
            //
            //     for (let i = 0; i < 5; i++) {
            //         data.shift();
            //         data.push(randomData());
            //     }
            //
            //     myChart.setOption({
            //         series: [{
            //             data: data
            //         }]
            //     });
            // }, 1000);


            // $.get('/data/aqi-beijing-demo.json', function (data) {
            $.post('/temp/getTemp', function (data) {
                data = data.data
                myChart1.setOption(option = {
                    title: {
                        text: 'NanSan Temp'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        data: data.map(function (item) {
                            return item[0];
                        })
                    },
                    yAxis: {
                        splitLine: {
                            show: false
                        }
                    },
                    toolbox: {
                        left: 'center',
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            },
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    dataZoom: [{
                        startValue: '2014-06-01'
                    }, {
                        type: 'inside'
                    }],
                    visualMap: {
                        top: 10,
                        right: 10,
                        pieces: [
                            {
                           gt: -100,
                           lte: 16,
                           color: '#999'
                        },
                        {
                            gt: 16,
                            lte: 27,
                            color: '#096'
                        }, {
                            gt: 27,
                            lte: 35,
                            color: '#ffde33'
                        },  {
                            gt: 35,
                            lte: 50,
                            color: '#cc0033'
                        }],
                        outOfRange: {
                            color: '#000'
                        }
                    },
                    series: {
                        name: 'NanSan Temp',
                        type: 'line',
                        data: data.map(function (item) {
                            return (item[1]);
                        }),
                        markLine: {
                            silent: true,
                            data: [{
                                yAxis: 16
                            }, {
                                yAxis: 27
                            }, {
                                yAxis: 35
                            }]
                        }
                    }
                });
            });


            /**
             *   创建socket连接
             *
             */
          //  let socket = io('http://47.106.79.133:3009');
            let socket = io('http://10.2.7.169:3009');

            //监听数据更新
            socket.on('tempUpdate',function(data){
                console.log('temp', data)
            });

            socket.on('tempUpdateDemo',function(data){

                console.log('监听到数据更新了',data.temp)

                myChart1.setOption({
                    xAxis: {
                        data: data.temp.map(function (item) {
                            return item[0];
                        })
                    },
                    series: [{
                        data: data.temp.map(function (item) {
                            return (item[1]);
                        })
                    }]
                });
            });

        }
    </script>
</div>
</body>
</html>